<template>
	<view class="list-content">
		<l-collapse :accordion="true">
			<l-collapse-item v-for="(item,index) in trainings" :key="index" :title="item.timeShow" 
			:tips="'发布人 '+item.teacher_name" :itemId="item.training_id"
				:planImg="item.course_img" :planTitle="item.course_title">
				<view class="content" v-if="item.planList">
					<view class="planItem" v-for="(pitem,pindex) in item.planList" :key="pindex" @click="goDetails(pitem)">
						<view class="planItem_name text_black">{{pitem.title}}</view>
						<view class="planItem_states">
							<view v-if="pitem.video_url.length>0" style="margin-right: 30rpx;"
								:class="pitem.status=='1'?'text_opblack':'text_active'">
								{{pitem.status=='1'?'未评价':'已评价'}}</view>
							<view class="text_opblack">{{pitem.video_url.length>0?'已上传':'未上传'}}</view>
							<image src="../../static/imgs/mine/right.png"></image>
						</view>
					</view>
				</view>
			</l-collapse-item>
		</l-collapse>
	</view>
</template>

<script>
	import lCollapse from "../../components/l-collapse/l-collapse.vue"
	import lCollapseItem from "../../components/l-collapse-item/l-collapse-item.vue";
	import {
		getTaskIndex,
		getTaskList
	} from "../../static/js/api/plan.js";
	export default {
		components: {
			lCollapse,
			lCollapseItem
		},
		data() {
			return {
				trainings: [],
				planList: [],
				student_id: null,
			}
		},
		onLoad(option) {
			if (option.student_id) {
				this.student_id = option.student_id
			}
		},
		onShow() {
			if(this.student_id){
				this.getTaskData()
			}
		},
		methods: {
			goDetails(item) {
				uni.navigateTo({
					url: "/pages/plan/details?id="+item.id
				})
			},
			getTaskData() {
				let _this = this
				getTaskIndex({
					student_id: _this.student_id,
					page: 1,
					per_page: 9999
				}).then(res => {
					if (res.trainings) {
						res.trainings.forEach(item => {
							let times = item.create_time.split(" ")
							item.time = times[0]
							item.timeShow = times[0]+' 训练计划'
							getTaskList({
								student_id: _this.student_id,
								training_id: item.training_id
							}).then(resp => {
								item.planList = resp.lists
								_this.$forceUpdate()
							})
						})
						_this.trainings = res.trainings
						_this.$forceUpdate()
					}
					console.log(_this.trainings)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list-content{
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.text_black {
		color: $uni-text-color-black !important;
	}

	.text_opblack {
		color: $uni-text-color-opblack !important;
	}

	.text_active {
		color: #FF6E00 !important;
		font-weight: bold;
	}

	.planItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		border-top: 1px solid #F5F5F5;

		&_name {
			font-size: 28rpx;
			font-weight: bold;
			margin-left: 30rpx;
		}

		&_states {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			margin-right: 30rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
</style>